<template>
  <!--登录表单的容器-->
  <div class="login_container">
    <!--登录区域style="opacity:80%;"-->
    <div class="login_box" >
      <!--头像-->
      <div class="avatar_box">
        <el-popover
          placement="top-start"
          title="租赁平台"
          width="200"
          trigger="hover"
          content="点我？？无需注册查看出租商品">
          <img slot="reference" src="../assets/img/login_head.jpg" @click="pushMain">
        </el-popover>
      </div>
      <!--表单-->
      <el-form :model="loginForm"
               :rules="loginRules"
               ref="loginForm"
               label-width="0px"
               class="login_form"
               v-loading="loading"
               element-loading-text="正在登录..."
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
        <!--与校验规则对应的是属性prop="username"-->
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名称" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入登录密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div class="code_box">
            <el-input v-model="loginForm.code" placeholder="点击图片更换验证码" prefix-icon="el-icon-mobile" class="login_code"></el-input>
            <img :src="captchaUrl" class="code_img" @click="updateCaptcha">
          </div>
        </el-form-item>
        <el-form-item class="login_btn">
          <!--通过v-model实现双向绑定-->
          <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
          <el-button type="text" @click="pushEnroll">没有账号？点击注册</el-button>
          <el-button type="primary" @click="submitForm" style="margin-left: 160px">登 录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--<el-drawer-->
      <!--title="用户注册"-->
      <!--:with-header="false"-->
      <!--:visible.sync="drawer"-->
      <!--:direction="direction"-->
      <!--:before-close="handleClose">-->
      <!--<div class="margin-drawer">-->
        <!--<div style="color: #000;height: 50px;padding-top: 10px;margin-left: 20px;margin-bottom: 20px"><p style="font-size:20px">用户注册 :</p></div>-->
        <!--<el-divider></el-divider>-->
        <!--<el-form :model="form">-->

          <!--<el-form-item class="common">-->
            <!--用户名：-->
            <!--<el-input-->
              <!--v-model="form.username"-->
              <!--size="medium"-->
              <!--style="width: 250px"-->
              <!--placeholder="请输入用户名"-->
              <!--suffix-icon="el-icon-user">-->
            <!--</el-input>-->
            <!--<br>-->
            <!--<span style="font-size: 12px;color: #9c9d99;margin-left: 60px">注意:用户名注册后不可更改</span>-->
          <!--</el-form-item>-->
          <!--<el-form-item class="common">-->
            <!--昵&nbsp;&nbsp;&nbsp;称：-->
            <!--<el-input-->
            <!--v-model="form.nickname"-->
            <!--size="medium"-->
            <!--style="width: 250px"-->
            <!--placeholder="请输入昵称"-->
            <!--suffix-icon="el-icon-user">-->
            <!--</el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item class="common">-->
            <!--性&nbsp;&nbsp;&nbsp;别：-->
            <!--<el-radio-group v-model="form.sex" size="medium">-->
              <!--<el-radio label="0" value="0">男</el-radio>-->
              <!--<el-radio label="1" value="1">女</el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
          <!--<el-form-item class="common">-->
            <!--生&nbsp;&nbsp;&nbsp;日：-->
            <!--<el-date-picker-->
              <!--v-model="form.birth"-->
              <!--format="yyyy-MM-dd"-->
              <!--value-format="yyyy-MM-dd"-->
              <!--style="width: 250px"-->
              <!--placeholder="请选择日期选择"-->
              <!--clearable>-->
            <!--</el-date-picker>-->
          <!--</el-form-item>-->
          <!--<el-form-item style="color: #000;margin-left: 30px">-->
            <!--密&nbsp;&nbsp;&nbsp;码：-->
            <!--<el-input-->
              <!--v-model="form.password"-->
              <!--size="medium"-->
              <!--style="width: 250px"-->
              <!--placeholder="请输入密码"-->
              <!--type="password"-->
              <!--suffix-icon="el-icon-view"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
        <!--<div class="btn_drawer">-->
          <!--<el-button @click="cancelForm" style="width: 40%">取 消</el-button>-->
          <!--<el-button type="primary" style="width: 40%" @click="register">注册</el-button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</el-drawer>-->
  </div>
</template>

<script>
  export default {
    // 该组件导出的名字为name: 'Login'
    name: 'Login',
    // 表单数据
    data() {
      return {
        // form: {
        //   username: '',
        //   nickname: '',
        //   sex: '',
        //   birth: '',
        //   password: '',
        //   avatar:''
        // },
        formLabelWidth: '50px',
        // drawer: false,
        // direction: 'ltr',
        // hidden:false,
        // 调用captcha接口
        captchaUrl:'/captcha?time='+new Date(),
        loginForm: {
          code: '',
          password: '123456',
          username: 'admin'
        },
        loading:false,
        checked:true,
        // 验证规则
        loginRules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      };
    },
    // 方法
    methods: {
      pushEnroll(){
        this.$router.push('/enroll');
      },
      pushMain(){
        this.$router.push('/main');
      },
      updateCaptcha(){
        this.captchaUrl='/captcha?time='+new Date();
      },
      submitForm() {
        // 找到表单的ref属性值进行校验
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.postRequest('/login',this.loginForm).then(resp => {
              // resp是后端返回前端的json对象，alert(JSON.stringify(resp));
              this.loading=true; //正在加载
              if(resp.code===200){
                this.loading=false;
                // 存储用户token
                const tokenStr = resp.obj.tokenHead+resp.obj.token;
                window.sessionStorage.setItem("tokenStr",tokenStr);
                // 通过路由跳转首页
                //replace:替换页面，不可以通过浏览器返回上一页
                // this.$router.replace('/home');
                let path =this.$route.query.redirect;
                this.$router.replace((path=='/'||path == undefined)?'/main':path);

              }else {
                this.$notify.error({ title: '错误', message: resp.message});
              }
            })
          } else {
            // 校验不通过，返回消息提示
            this.$notify.error({ title: '错误', message: '错了哦，请输入所有字段'});
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.loginForm.resetFields();
      },
      // handleClose(done) {
      //   done()
      // },
      // cancelForm() {
      // },
      // //上传图片
      // uploadImg(item) {
      //   console.log(item);
      //   let formData = new FormData()
      //   formData.append('file', item.file)
      //   this.hidden=false;
      //   this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
      //     if (resp) {
      //       console.log(resp);
      //       this.form.avatar=resp.obj;
      //     }
      //   })
      // },
      // //删除图片
      // handleRemove() {
      //   let formData = new FormData()
      //   formData.append('file', this.form.avatar)
      //   this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
      //     if (resp) {
      //       console.log(resp);
      //     }
      //   })
      // },
    }
  }
</script>

<!--scoped表示当前的样式只在该页面有效，不添加scope则为全局样式-->
<style lang="less" scoped>
  .login_container {
    height: 100%;
    background: url("../assets/img/login-bg.jpg");
    background-size: 100%;
  }
  .margin-drawer{

    background-size: 400%;
    /*background-repeat:no-repeat;*/
    /*background-position:5px 550px;*/
  }
  .btn_drawer{
    margin-top: 144px;
    margin-left: 40px;
    padding-bottom: 77px;
  }
  .common{
    color: #000;
    margin-left: 30px;
  }

  .login_box {
    border-radius: 5px;
    width: 360px;
    height: 380px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box{
      width: 80px;
      height: 80px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin:-30px auto;
      background-color: #FFFFFF;

      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }
    }

    .login_form{
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;

      .login_btn{
        display: flex;
        justify-content: flex-end;
        .loginRemember{
          margin-right: 120px;
        }
      }

      .code_box{
        display: flex;
        .login_code{
          width: 60%;
          justify-content: left;
        }

        .code_img{
          width: 40%;
          height: 45px;
          justify-content: flex-end;
          margin-left: 10px;
        }
      }
    }
  }
</style>
